<template>
  <div class="remind-box knife_container">
    <div class="remind-head">
      <img class="remind-img" src="../../images/succeed.png"/>
      <span class="remind-word">订单提交 感谢您的支持</span>
    </div>
    <section class="remind-body">
      <div class="remind-detail-info detail-left">
        <p>支付方式：{{payType[orderInfosObj.payType]}}</p>
        <p>订单合计：¥{{orderInfosObj.totalAmount | floatPrices}}</p>
        <p>税费：¥{{orderInfosObj.taxAmount | floatPrices}}</p>
        <p>运费：¥{{transportObj.freightAmount - orderInfosObj.freightPmtAmount | floatPrices}}</p>
        <p>优惠：-¥{{orderInfosObj.pmtAmount | floatPrices}}</p>
        <p>实付：¥{{orderInfosObj.finalAmount | floatPrices}}</p>
      </div>
      <div class="remind-detail-info detail-right">
        <p>订单号：{{orderId}}</p>
        <p>下单时间：{{orderInfosObj.createTime}}</p>
        <p>收货人：{{receivingInfo.receiver}}</p>
        <p>联系电话：{{receivingInfo.receiverMobile}}</p>
        <p>收货地址：{{receivingInfo.province}}{{receivingInfo.city}}{{receivingInfo.district}}{{receivingInfo.address}}</p>
      </div>
    </section>
    <div class="remind-btns-box">
      <router-link class="remind-btn color-gray6B bg-gray" :to="{name: 'Index'}">返回首页</router-link>
      <router-link class="remind-btn bg-yellow color-gray30" :to="{name: 'orderDetail', params: { 'orderId': orderInfosObj.orderId }}">查看订单</router-link>
    </div>
    <!-- <div class="remind-banner">
      <img src="../../images/newuser-banner.jpg" alt="">
    </div> -->
  </div>
</template>

<script>
  import {getOrderInfos} from '@/service/get-data'
  import {payType} from '@/tool/index'
  export default {
    data () {
      return {
        receivingInfo: {},
        orderInfosObj: {},
        transportObj: {}
      }
    },
    computed: {
      payType () {
        return payType
      },
      orderId () {
        return this.$route.params.orderId
      }
    },
    methods: {
      async fetchOrderInfo () {
        let res = await getOrderInfos(this.orderId)
        if (res.data.resultCode && res.data.resultCode === 2000) {
          res = res.data.data
          this.orderInfosObj = res
          this.receivingInfo = res.receivingInfo
          this.transportObj = res.transport
        } else {
          this.$message({
            message: res.resultMsg,
            type: 'wraming'
          })
        }
      }
    },
    mounted () {
      this.fetchOrderInfo()
    }
  }
</script>

<style lang="scss" scoped>
  .remind-box{
    background: #fff;
    margin-top:40px;
    margin-bottom: 40px;
    padding-top:100px;
  }
  .remind-head{
    text-align: center;
    margin-bottom: 90px;
    .remind-img{
      width: 58px;
      vertical-align: middle;
    }
    .remind-word{
      color: #333333;
      font-size: 18px;
      vertical-align: middle;
      display: inline-block;
      margin-left: 20px;
    }
  }
  .remind-body{
    display: flex;
    justify-content: space-around;
    width: 800px;
    margin: 0 auto 76px;
    .remind-detail-info{
      box-sizing: border-box;
      width: 50%;
      padding-top: 10px;
    }
    p{
      line-height: 22px;
      margin-bottom: 10px;
      color: #303030;
    }
  }
  .detail-left{
    p{
      padding-left: 140px;
    }
  }
  .detail-right{
    border-left: 1px solid #EEEEEE;
    padding-left: 50px;
  }
  .remind-btns-box{
    margin-top: 38px;
    padding-bottom: 95px;
    display: flex;
    justify-content: center;
    .remind-btn{
      border-radius: 67px;
      font-size: 16px;
      width: 276px;
      height: 50px;
      line-height: 50px;
      text-align: center;
      margin-right: 20px;
      &:last-child{
        margin-right: 0;
      }
    }
    .btn-gray{
      background: #EEEEEE;
    }
    .btn-yellow{
      background: #FFE100;
    }
  }
  .remind-banner{
    width: 1200px;
    height: 200px;
    img{
      width: 100%;
    }
  }
</style>
